<template>
  <canvas ref="canvasRef" class="matrix-rain-3d"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

// 技术关键词和emoji
const techKeywords = [
  'console.log', 'npm install', 'git push', 'git commit', 'async await',
  'const', 'let', 'function', 'import', 'export', 'class', 'extends',
  'return', 'if', 'else', 'for', 'while', 'try', 'catch', 'new',
  'this', 'super', 'static', 'void', 'null', 'true', 'false',
  '💻', '🚀', '⚡', '🔥', '✨', '💡', '🎯', '⚙️', '🌟', '💾'
]

const getRandomChar = () => {
  // 70% 概率是0或1，30% 概率是关键词或emoji
  if (Math.random() > 0.3) {
    return Math.random() > 0.5 ? '1' : '0'
  }
  return techKeywords[Math.floor(Math.random() * techKeywords.length)]
}

class MatrixColumn {
  constructor(x, canvas, depth) {
    this.x = x
    this.canvas = canvas
    this.depth = depth // 0-1, 0是最远，1是最近
    this.y = Math.random() * -500
    this.speed = (0.5 + Math.random() * 2) * (0.5 + this.depth * 1.5)
    this.chars = []
    this.length = Math.floor(10 + Math.random() * 20)
    
    // 初始化字符
    for (let i = 0; i < this.length; i++) {
      this.chars.push({
        char: getRandomChar(),
        opacity: 1 - (i / this.length) * 0.7
      })
    }
  }
  
  update() {
    this.y += this.speed
    
    // 重置位置
    if (this.y > this.canvas.height + this.length * 20) {
      this.y = -this.length * 20
      this.speed = (0.5 + Math.random() * 2) * (0.5 + this.depth * 1.5)
    }
    
    // 随机更新字符
    if (Math.random() > 0.95) {
      const index = Math.floor(Math.random() * this.chars.length)
      this.chars[index].char = getRandomChar()
    }
  }
  
  draw(ctx) {
    // 根据深度计算大小和颜色
    const baseSize = 14 + this.depth * 6
    const alpha = 0.3 + this.depth * 0.7
    
    // 绘制每个字符
    this.chars.forEach((charObj, i) => {
      const y = this.y + i * (baseSize * 1.2)
      
      if (y > 0 && y < this.canvas.height) {
        // 头部字符更亮
        const brightness = i === 0 ? 1 : charObj.opacity
        
        // 根据深度使用不同颜色
        let color
        if (this.depth > 0.7) {
          color = `rgba(0, 243, 255, ${brightness * alpha})` // 霓虹蓝
        } else if (this.depth > 0.4) {
          color = `rgba(168, 85, 247, ${brightness * alpha})` // 霓虹紫
        } else {
          color = `rgba(236, 72, 153, ${brightness * alpha})` // 霓虹粉
        }
        
        ctx.fillStyle = color
        ctx.font = `${baseSize}px 'Courier New', monospace`
        
        // 添加发光效果
        if (i === 0 || brightness > 0.8) {
          ctx.shadowBlur = 10 + this.depth * 10
          ctx.shadowColor = color
        } else {
          ctx.shadowBlur = 0
        }
        
        // 绘制字符
        const charWidth = ctx.measureText(charObj.char).width
        ctx.fillText(charObj.char, this.x - charWidth / 2, y)
      }
    })
  }
}

onMounted(() => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 设置canvas尺寸
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 创建多层列（性能优化）
  const columns = []
  const isMobile = /mobile|android|iphone|ipad/i.test(navigator.userAgent)
  const columnWidth = isMobile ? 40 : 30 // 移动端增加间距
  const numColumns = Math.ceil(canvas.width / columnWidth)
  
  // 根据设备性能调整层数
  const depths = isMobile ? [0.5] : [0.2, 0.5, 0.9]
  const spawnChance = isMobile ? 0.5 : 0.7 // 移动端减少列数
  
  // 创建多层深度的列
  for (let depth of depths) {
    for (let i = 0; i < numColumns; i++) {
      if (Math.random() < spawnChance) {
        columns.push(new MatrixColumn(i * columnWidth, canvas, depth))
      }
    }
  }
  
  // 动画循环
  const animate = () => {
    // 半透明黑色覆盖产生拖尾效果
    ctx.fillStyle = 'rgba(10, 15, 30, 0.1)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // 按深度排序（先绘制远的）
    columns.sort((a, b) => a.depth - b.depth)
    
    // 更新和绘制所有列
    columns.forEach(column => {
      column.update()
      column.draw(ctx)
    })
    
    animationId = requestAnimationFrame(animate)
  }
  
  animate()
  
  // 清理
  onUnmounted(() => {
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
    window.removeEventListener('resize', resizeCanvas)
  })
})
</script>

<style scoped>
.matrix-rain-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}
</style>

